import React from 'react'
import { Carousel } from 'antd';
import '../index.less'
import teacher1 from '../images/teacher1.png'
import teacher2 from '../images/teacher2.png'
import teacher3 from '../images/teacher3.png'
import teacher4 from '../images/teacher4.png'

export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [
        { active: '-active', name: 'ANTHONY ROBIN', country: 'LONDON', desc: '儿童文学专家', img: teacher1, to: '/index/course' },
        { active: '', name: 'DONNA ARIA', country: 'NEW YORK', desc: '20年+小学英语教育', img: teacher2, to: '/index/course' },
        { active: '', name: 'MICHEIL.D', country: 'BOSTON', desc: '20年+ 儿童教育', img: teacher3, to: '/index/course' },
        { active: '', name: 'THERESA. P', country: 'LONDON', desc: '儿童文学作家', img: teacher4, to: '/index/course' },
      ]
    }
  }

  beforeChange = (from, to) => {
    const data = this.state.data
    data.map((item, i) => {
      item.active = i === to ? '-active' : ''
    })
    this.setState({ slideIndex: to, data })
  }
  render(){
    const data = this.state.data
    return (
      <div className="long-team-expert-pad">
        <h2>专家与教学团队</h2>
        <div className="team-of-experts-comp">
          <Carousel
            className="space-carousel"
            frameOverflow="visible"
            cellSpacing={40}
            slideWidth={0.5}
            dots={true}
            // autoplay
            infinite
            autoplayInterval={5000}
            swipeSpeed={2}
            beforeChange={this.beforeChange}
            afterChange={this.afterChange}
          >
            {data.map((item, index) => (
              <div className={`item-page${item.active}`} key={index}>
                <div className="img"><img src={item.img} /></div>
                <p className="name">{item.name}</p>
                <p className="country">{item.country}</p>
                <p className="desc">{item.desc}</p>
              </div>
            ))}
          </Carousel>
        </div>
      </div>
    )
  }
}

